'use client';

import { Button, Form, Input, Typography, ConfigProvider, Steps } from 'antd';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';

export default function ResetPasswordPage() {
  const [form] = Form.useForm();
  const [currentStep, setCurrentStep] = useState(0);

  const onFinish = (values: any) => {
    if (currentStep === 0) {
      // 发送验证码
      setCurrentStep(1);
    } else if (currentStep === 1) {
      // 验证验证码
      setCurrentStep(2);
    } else {
      // 重置密码
      console.log('Success:', values);
    }
  };

  const steps = [
    {
      title: '验证身份',
      content: (
        <Form.Item
          name="account"
          rules={[{ required: true, message: '请输入手机号/邮箱地址' }]}
        >
          <Input
            placeholder="请输入手机号/邮箱地址"
            style={{ 
              backgroundColor: '#F8F9FC',
              border: '1px solid #F0F2F7',
            }}
          />
        </Form.Item>
      ),
    },
    {
      title: '安全验证',
      content: (
        <Form.Item
          name="verificationCode"
          rules={[{ required: true, message: '请输入验证码' }]}
        >
          <div style={{ display: 'flex', gap: '12px' }}>
            <Input
              placeholder="请输入验证码"
              style={{ 
                backgroundColor: '#F8F9FC',
                border: '1px solid #F0F2F7',
              }}
            />
            <Button 
              style={{ 
                minWidth: '120px',
                fontSize: '14px',
              }}
            >
              获取验证码
            </Button>
          </div>
        </Form.Item>
      ),
    },
    {
      title: '重置密码',
      content: (
        <>
          <Form.Item
            name="newPassword"
            rules={[
              { required: true, message: '请输入新密码' },
              { min: 8, message: '密码长度至少为8位' }
            ]}
          >
            <Input.Password
              placeholder="请输入新密码"
              iconRender={(visible) => (
                visible ? 
                  <EyeTwoTone style={{ fontSize: '16px' }} /> : 
                  <EyeInvisibleOutlined style={{ fontSize: '16px' }} />
              )}
              style={{ 
                backgroundColor: '#F8F9FC',
                border: '1px solid #F0F2F7',
              }}
            />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            dependencies={['newPassword']}
            rules={[
              { required: true, message: '请确认新密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password
              placeholder="请确认新密码"
              iconRender={(visible) => (
                visible ? 
                  <EyeTwoTone style={{ fontSize: '16px' }} /> : 
                  <EyeInvisibleOutlined style={{ fontSize: '16px' }} />
              )}
              style={{ 
                backgroundColor: '#F8F9FC',
                border: '1px solid #F0F2F7',
              }}
            />
          </Form.Item>
        </>
      ),
    },
  ];

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#4C6FFF',
          borderRadius: 12,
          controlHeight: 48,
          fontSize: 14,
        },
      }}
    >
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '20px',
        background: 'linear-gradient(135deg, #F5F7FF 0%, #FFFFFF 100%)'
      }}>
        <div style={{
          width: '400px',
          background: '#FFFFFF',
          borderRadius: '24px',
          boxShadow: '0 4px 24px rgba(76, 111, 255, 0.08)',
          padding: '48px 40px',
        }}>
          {/* Logo */}
          <div style={{ textAlign: 'center', marginBottom: '40px' }}>
            <Image
              src="/cat-logo.png"
              alt="Logo"
              width={80}
              height={80}
              style={{ height: 'auto' }}
              priority
            />
          </div>

          {/* Title */}
          <div style={{ 
            textAlign: 'center', 
            marginBottom: '32px'
          }}>
            <h1 style={{ 
              fontSize: '24px', 
              fontWeight: 600, 
              color: '#1A1A1A',
              marginBottom: '8px'
            }}>
              重置密码
            </h1>
            <p style={{ 
              fontSize: '14px', 
              color: 'rgba(0, 0, 0, 0.45)',
              margin: 0
            }}>
              请完成以下步骤以重置您的密码
            </p>
          </div>

          {/* Steps */}
          <Steps
            current={currentStep}
            items={steps.map(item => ({ title: item.title }))}
            style={{ marginBottom: '32px' }}
          />

          {/* Form */}
          <Form
            form={form}
            name="resetPassword"
            onFinish={onFinish}
            size="large"
          >
            {steps[currentStep].content}

            <Button
              type="primary"
              htmlType="submit"
              block
              style={{
                fontSize: '16px',
                fontWeight: 500,
                marginTop: '24px',
                marginBottom: '24px'
              }}
            >
              {currentStep === steps.length - 1 ? '完成' : '下一步'}
            </Button>

            <div style={{ 
              textAlign: 'center',
              fontSize: '14px',
              color: 'rgba(0, 0, 0, 0.45)'
            }}>
              想起密码了？
              <Link 
                href="/sign_in" 
                style={{ 
                  color: '#4C6FFF',
                  marginLeft: '4px',
                  fontWeight: 500
                }}
              >
                返回登录
              </Link>
            </div>
          </Form>
        </div>

        {/* Footer */}
        <div style={{ 
          marginTop: '24px',
          color: 'rgba(0, 0, 0, 0.45)',
          fontSize: '12px'
        }}>
          © 2024 NeuroForge · 浙ICP备202302584号
        </div>
      </div>
    </ConfigProvider>
  );
} 